<script setup lang="ts">
import { evaluateConsultOrder } from '@/services/consult'
import type { ConsultOrderItem } from '@/types/consult'
import type { EvaluateDoc } from '@/types/room'
import { inject } from 'vue'
import { computed } from 'vue'
import { ref } from 'vue'
defineProps<{
  evaluateDoc?: EvaluateDoc
}>()

const score = ref(0)
const content = ref('')
const anonymousFlag = ref(false)
const number = computed(() => (anonymousFlag.value ? 1 : 0))
// const disabled = ref(true)
const disabled = computed(() => !score.value || !content.value)

const submit = () => {
  // console.log(111)
  // 调用接口 带上score  content anonymousFlag  医生id  订单id
  // console.log(score.value, content.value, anonymousFlag.value, consult?.value)
  if (!consult?.value) return
  if (!consult.value.docInfo?.id) return

  evaluateConsultOrder({
    docId: consult.value.docInfo?.id,
    orderId: consult?.value.id,
    score: score.value,
    content: content.value,
    anonymousFlag: number.value
  })

  // 孙组件 需要 让父组件找到对应的list那一项 需要更新消息类型(未评价->已评价) 评价分数
  // 父组件传递一个方法下来 给子组件调用
  updateList && updateList(score.value)
}

// ------------------孙组件接收consult数据------------------------------------
const consult = inject<{ value: ConsultOrderItem }>('consult')
// const consult = inject<接收的数据类型>('consult')
console.log(consult, 555)

const updateList = inject<(score: number) => void>('updateList')
</script>

<template>
  <!-- 已评价 -->
  <div class="evaluate-card" v-if="evaluateDoc">
    <p class="title">医生服务评价</p>
    <p class="desc">我们会更加努力提升服务质量</p>
    <van-rate
      :model-value="evaluateDoc.score"
      size="7vw"
      gutter="3vw"
      color="#FADB14"
      void-icon="star"
      void-color="rgba(0,0,0,0.04)"
    />
  </div>
  <!-- 未评价 -->
  <div class="evaluate-card" v-else>
    <p class="title">感谢您的评价</p>
    <p class="desc">本次在线问诊服务您还满意吗？</p>
    <van-rate
      v-model="score"
      size="7vw"
      gutter="3vw"
      color="#FADB14"
      void-icon="star"
      void-color="rgba(0,0,0,0.04)"
    />
    <van-field
      v-model="content"
      type="textarea"
      maxlength="150"
      show-word-limit
      rows="3"
      placeholder="请描述您对医生的评价或是在医生看诊过程中遇到的问题"
    ></van-field>
    <div class="footer">
      <van-checkbox v-model="anonymousFlag">匿名评价</van-checkbox>
      <van-button
        @click="submit"
        type="primary"
        size="small"
        round
        :disabled="disabled"
      >
        提交评价
      </van-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.evaluate-card {
  width: 100%;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
  padding: 15px;
  .title {
    font-size: 15px;
    margin-bottom: 5px;
  }
  .desc {
    font-size: 12px;
    margin-bottom: 15px;
    color: var(--cp-tip);
  }
  .van-field {
    background-color: var(--cp-bg);
    margin: 15px 0;
    border-radius: 8px;
  }
  .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    :deep() {
      .van-checkbox {
        .van-icon {
          font-size: 12px;
        }
        &__label {
          font-size: 12px;
          color: var(--cp-tip);
        }
        height: 16px;
      }
      .van-button {
        padding: 0 16px;
        &.disabled {
          opacity: 1;
          background: #fafafa;
          color: #d9dbde;
          border: #fafafa;
        }
      }
    }
  }
}
</style>
